<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页</title>
    <link rel="stylesheet" href="/static/elementui/index.css" />
    <link rel="stylesheet" href="/static/globalCss.css" />

    <script src="/static/commonJS.js"></script>

    <style>

        body {
            display: flex;
            align-items: center;
        }

        /*取消表格鼠标进入高亮显示*/
        .el-table__body tr.current-row>td.el-table__cell{
            background-color: transparent;
        }

        .el-table {
            --el-table-row-hover-bg-color: rgba(255, 0, 0, 0);
        }

        .el-only-child__content {
            display: flex;
            justify-content: center;
        }

    </style>
</head>
<body>

<div id="app">
<!--    <h1>{{ message }}</h1>-->
    <el-table
            :data="users"
            border
            highlight-current-row
            :show-header="false"
            :row-style="rowStyle"
            @row-click="selectRow">
        <el-table-column
                prop="username"
                label="姓名"
                width="180">
            <template #default="scope">
                <el-popover trigger="click" placement="top" :width="160">
                    <div style="text-align: center; margin: 0">
                        <el-button size="small" type="danger" plain @click="deleteUser">
                            删除
                        </el-button>
                        <el-button size="small" type="primary" @click="show('edit')">
                            编辑
                        </el-button>
                    </div>
<!--                    <template #default>-->
<!--                        <div>name: {{ scope.row.name }}</div>-->
<!--                        <div>address: {{ scope.row.address }}</div>-->
<!--                    </template>-->
                    <template #reference>
                        {{ scope.row.username }}
                    </template>
                </el-popover>
            </template>
        </el-table-column>
    </el-table>

    <div  style="padding-top: 80px">
        <el-button type="primary" @click="confirm">确定</el-button>
        <el-button type="primary" @click="show('add')">新增</el-button>
    </div>

    <el-dialog
            v-model="showDailog"
            :title="dialogTitle"
            style="width: 90%;">
        <el-form :model="dialogUser"
                 label-width="auto"
                 label-suffix="："
                 style="max-width: 600px; margin: 0 auto">
            <input hidden v-model="dialogUser.userId"/>
            <el-form-item label="姓名">
                <el-input v-model="dialogUser.username"/>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="dialogUser.mail"/>
            </el-form-item>
        </el-form>

        <div style="padding-top: 10px;">
            <el-button type="primary" size="large" @click="saveOrUpdate">保存</el-button>
        </div>
    </el-dialog>
</div>

</body>

<script>

    const { ref } = Vue

    bindApp("app", {
        setup() {
            const message = ref('Hello vue!')
            return {
                message
            }
        },
        data() {
            return {
                dialogTitle: "新增",
                visiblePopover: false,
                selectRowUserId: "",
                showDailog: false,
                selectUser: {},
                dialogUser: {},
                users: [(${users})],
            }
        },
        methods: {
            selectRow(row, column, event) {
                console.log(row);
                console.log(column);
                console.log(event);
                this.visiblePopover = true;
                this.selectRowUserId = row.userId;
                this.selectUser = row;
            },
            // 更改选中行背景色
            rowStyle({ row }) {
                if (this.selectRowUserId === row.userId) {
                    return { 'background-color': '#ffbdbd', cursor: 'pointer' };
                }
                return { cursor: 'pointer' };
            },
            confirm() {
                if (this.selectRowUserId) {
                    console.log("userId", this.selectRowUserId)
                    axios.post("/api/selectUser/" + this.selectRowUserId)
                        .then((data) => {
                            if (data.status == 200 && data.data.code == "200") {
                                window.location.href = "/index/clock";
                            } else {
                                alert(data.data.message);
                            }
                        })
                        .catch((ex) => {
                            alert(JSON.stringify(ex));
                        })
                } else {
                    alert("数据异常")
                }
            },
            show(type) {
                if (type === "add") {
                    this.dialogTitle = "新增";
                    this.dialogUser = {};
                } else {
                    this.dialogTitle = "修改";
                    this.dialogUser = this.selectUser;
                }
                this.showDailog = true;
            },
            deleteUser() {
                ElementPlus.ElMessageBox.confirm(
                    '确认删除?',
                    '警告',
                    {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        type: 'error',
                    })
                    .then(() => {
                        var loading = startLoading();
                        axios.post("/api/deleteUser", {
                            userId: this.selectRowUserId
                        })
                            .then(data => {
                                loading.close();
                                this.showDailog = false;
                                if (data.status == 200 && data.data.code == "200") {
                                    data = data.data.data;
                                    showMessage("success", "删除成功");
                                    setTimeout(() => {
                                        window.location.href = "/";
                                    }, 500);
                                } else {
                                    showMessage("error", JSON.stringify(data.data ? data.data : data));
                                }
                            })
                            .catch(ex => {
                                loading.close();
                                this.showDailog = false;
                                showMessage("error", JSON.stringify(ex));
                            })
                    });

            },
            saveOrUpdate() {
                var loading = startLoading();
                axios.post("/api/saveOrUpdateUser", this.dialogUser)
                    .then(data => {
                        loading.close();
                        this.showDailog = false;
                        if (data.status == 200 && data.data.code == "200") {
                            data = data.data.data;
                            showMessage("success", "保存成功");
                            setTimeout(() => {
                                window.location.href = "/";
                            }, 1000);
                        } else {
                            showMessage("error", JSON.stringify(data.data ? data.data : data));
                        }
                    })
                    .catch(ex => {
                        loading.close();
                        this.showDailog = false;
                        showMessage("error", JSON.stringify(ex));
                    })
            }
        }
    });

</script>

</html>